<template>
    <div>
        <div style="margin-top: 2opx;">
            <el-table :data="checkInList">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="记录id" align="center" prop="id" />
                <el-table-column label="姓名" align="center" prop="roomorder.pname" />
                <el-table-column label="电话号" align="center" prop="roomorder.phone" />
                <el-table-column label="房间号" align="center" prop="roomorder.rnum" />
                <el-table-column label="房间名称" align="center" prop="roomorder.rname" />
                <el-table-column label="入住时间" align="center" prop="createtime" />
                <el-table-column label="入住日期" align="center" prop="roomorder.intime" />
                <el-table-column label="离店日期" align="center" prop="roomorder.outtime" />
                <el-table-column label="状态" align="center" prop="status" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit"
                            @click="findInfo(scope.row)">查看详情</el-button>
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleCheckOut(scope.row)"
                            v-show="scope.row.status === '已入住'">退房</el-button>
                        <el-button size="mini" type="text" el-icon-water-cup @click="handleDeletet(scope.row)"
                            v-show="scope.row.status === '已退房'">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <div>

            <el-dialog title="入住详情" :visible.sync="dialogFormVisible">

                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="订单详情" name="first">
                        <div>
                            <el-form size="medium" label-width="100px">
                                <el-form-item label="订单号">
                                    <el-input v-model="InfoForm.roomorder.id" clearable :style="{ width: '100%' }"
                                        :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="订房旅客">
                                    <el-input v-model="InfoForm.roomorder.pname" clearable :style="{ width: '100%' }"
                                        :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="电话">
                                    <el-input v-model="InfoForm.roomorder.phone" clearable :style="{ width: '100%' }"
                                        :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="创建时间">
                                    <el-input v-model="InfoForm.roomorder.createtime" clearable
                                        :style="{ width: '100%' }" :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="入住时间">
                                    <el-input v-model="InfoForm.roomorder.intime" clearable :style="{ width: '100%' }"
                                        :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="离开时间">
                                    <el-input v-model="InfoForm.roomorder.outtime" clearable :style="{ width: '100%' }"
                                        :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="房间名称">
                                    <el-input v-model="InfoForm.roomorder.rname" clearable :style="{ width: '100%' }"
                                        :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="订单金额">
                                    <el-input v-model="InfoForm.roomorder.money" clearable :style="{ width: '100%' }"
                                        :disabled="true">
                                    </el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="房间详情" name="second">
                        <div>
                            <el-form size="medium" label-width="100px">
                                <el-form-item label="房间Id">
                                    <el-input v-model="InfoForm.roomorder.roomInfo.id" clearable
                                        :style="{ width: '100%' }" :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="房间名称">
                                    <el-input v-model="InfoForm.roomorder.roomInfo.rname" clearable
                                        :style="{ width: '100%' }" :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="房间号">
                                    <el-input v-model="InfoForm.roomorder.roomInfo.rnum" clearable
                                        :style="{ width: '100%' }" :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="楼层">
                                    <el-input v-model="InfoForm.roomorder.roomInfo.floor" clearable
                                        :style="{ width: '100%' }" :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="面积">
                                    <el-input v-model="InfoForm.roomorder.roomInfo.area" clearable
                                        :style="{ width: '100%' }" :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="床位">
                                    <el-input v-model="InfoForm.roomorder.roomInfo.people" clearable
                                        :style="{ width: '100%' }" :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="价格">
                                    <el-input v-model="InfoForm.roomorder.roomInfo.price" clearable
                                        :style="{ width: '100%' }" :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="简介">
                                    <el-input v-model="InfoForm.roomorder.roomInfo.info" clearable
                                        :style="{ width: '100%' }" :disabled="true">
                                    </el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="旅客详情" name="third">
                        <div v-for="(item,index) in InfoForm.customers" :key="index" style="border-bottom: solid 1px blue;">
                            
                            <div style="margin-left: 30px; color: #007acc; font-size: 15px; font-weight: bold; margin-bottom: 10px;">旅客{{ index+1 }}</div>
                            <el-form size="medium" label-width="100px">
                                <el-form-item label="旅客id">
                                    <el-input v-model="item.id" clearable :style="{ width: '100%' }"
                                        :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="旅客姓名">
                                    <el-input v-model="item.name" clearable :style="{ width: '100%' }"
                                        :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="旅客性别">
                                    <el-input v-model="item.sex" clearable :style="{ width: '100%' }"
                                        :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="旅客民族">
                                    <el-input v-model="item.sex" clearable :style="{ width: '100%' }"
                                        :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="旅客电话">
                                    <el-input v-model="item.phone" clearable :style="{ width: '100%' }"
                                        :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="证件类型">
                                    <el-input v-model="item.customerIdType.name" clearable
                                        :style="{ width: '100%' }" :disabled="true">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="证件号">
                                    <el-input v-model="item.idcard" clearable :style="{ width: '100%' }"
                                        :disabled="true">
                                    </el-input>
                                </el-form-item>

                                <el-form-item label="旅客等级">
                                    <el-input v-model="item.customerRange.name" clearable :style="{ width: '100%' }"
                                        :disabled="true">
                                    </el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-tab-pane>
                </el-tabs>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { checkInDelete, checkout, listCheckIn } from '../../../api/shx/checkIn/checkIn';

export default {
    data() {
        return {
            activeName: 'second',
            dialogFormVisible: false,
            InfoForm: {
                id: 95,
                customerId: "11",
                orderId: 55,
                del: 0,
                status: "已入住",
                isbreakfas: 1,
                customers: null,
                roomorder: {
                    id: 6,
                    pname: "济联把领老",
                    phone: "18612672323",
                    intime: "2012-11-03 17:45:59",
                    outtime: "2012-12-26 08:34:09",
                    rname: "品与热去又团",
                    rNum: 58,
                    status: 93,
                    customers: [
                        {
                            id: 18,
                            name: "主认些论示能",
                            sex: "女",
                            phone: "19899838871",
                            birthday: "1974-10-17 19:00:53",
                            nation: "anim adipisicing",
                            crange: 53,
                            idType: 40,
                            idcard: "59",
                            del: 14,
                            customerIdType: {
                                id: 44,
                                name: "大理到新",
                                del: 43
                            },
                            customerRange: {
                                id: 82,
                                name: "共包计着",
                                del: 75
                            }
                        }
                    ],
                    del: 44,
                    roomInfo: {
                        id: 83,
                        rName: "五但作专选利更",
                        rNum: 28,
                        area: 41,
                        floor: 51,
                        people: 4,
                        price: 68,
                        image: "http://dummyimage.com/400x400",
                        info: null,
                        isaddbed: 12,
                        ismeal: 3,
                        iswindow: 27,
                        typeId: 62,
                        statusId: 48,
                        base: "do",
                        service: "esse ea aute",
                        game: null,
                        del: 8,
                        roomType: {
                            id: 62,
                            typeName: "果计委状些米",
                            del: 31
                        },
                        roomStatus: {
                            id: 54,
                            status: null,
                            del: 20
                        }
                    },
                    roomOrderStatus: {
                        id: 34,
                        status: null,
                        del: 31
                    },
                    money: 47
                }
            },
            checkInList: [],
            checkoutForm: {
                checkInId: undefined,
                roomNum: undefined
            },
            deleteForm: {
                id: undefined
            }
        }
    },
    created() {
        this.getCheckInList();
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        // 请求订单记录列表
        getCheckInList() {
            listCheckIn().then(res => {
                console.log(res);
                this.checkInList = res.data;
            })
        },
        // 处理退房
        handleCheckOut(row) {
            console.log("点击退房");
            console.log(row);
            this.checkoutForm.roomNum = row.roomorder.rnum;
            this.checkoutForm.checkInId = row.id
            console.log(this.checkoutForm);
            this.$confirm('退订房间' + row.roomorder.rnum, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.scheckout()
                this.$message({
                    type: 'success',
                    message: '退房成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消退房'
                });
            });
        },
        // 退房请求
        async scheckout() {
            await checkout(this.checkoutForm).then(res => {
                console.log(res);
                this.getCheckInList();
            })
        },

        // 删除请求
        async delete() {
            checkInDelete(this.deleteForm).then(res => {
                console.log(res);
                this.getCheckInList();
            })
        },
        // 处理删除
        handleDeletet(row) {
            console.log("点击删除");
            console.log(row);
            this.deleteForm.id = row.id
            console.log(this.deleteForm);
            this.$confirm('是否确认要删除此入住记录', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.delete();
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 查看详情
        findInfo(row) {
            console.log("点击查看详情");

            this.dialogFormVisible = true;
            this.InfoForm = row;
            console.log(this.InfoForm);

        }
    }
}
</script>